<template>
	<view>
		<uni-popup ref="paypass" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'" @change="change_hanlder"
			:isMaskClick="false">
			<view class="">
				<view
					:class="[{'alert-border-black alert-border-shadow-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]"
					:style="{'background':kbackgroundColor,color:knormalColor}"
					class="store-view store-border-all tips-padding">
					<view class="close" @tap="close">
						<!-- <n-icon name="roundclosefill" size="36" color="#f9e24b"></n-icon> -->
					</view>
					<view class="popup-title">
						<text class="pay_pass_title_text" :style="{color:knormalColor}">
							请输入支付密码
						</text>
					</view>
					<view class="input_box">
						<view class="input_group_item"  v-for="item,id in pwLength" :key="id">
							<block v-if="item.value">
								<text class="input_group_item_text"  :style="{color:knormalColor}" v-if="show_pass">{{item.value}}</text>
								<text class="input_group_item_text"  :style="{color:knormalColor}" v-else>*</text>
							</block>
						</view>
					</view>
					<view class="forget" @tap="fotget()" :style="{color:kselectColorSize}">
						忘记密码
					</view>
				</view>
			</view>
<!-- 		</uni-popup>
			<uni-popup ref="box_input" type="bottom" :maskBackgroundColor="'rgba(0,0,0,0)'" @change="change_hanlder"
			:isMaskClick="false"> -->
			<view class="input_keyborad"  style="z-index: 99;" :style="[{'background':(ktheme != 'purple') ? '#000' :'#cecece'},{'color':(ktheme != 'purple') ? '#fff' :'#000'}]" >
				<view class="number_input" :style="[selStytle]">
					<view class="number_input_item" :hover-stay-time="50" :hover-start-time="50"
						hover-class="input_hover" v-for="item,id in Keyboard_List" :key="id" @tap="tap_num(id,item.id)">
						<text class="number_input_item_text">{{item.id}}</text>
					</view>

					<view class="number_input_item" :hover-stay-time="50" :hover-start-time="50"
						hover-class="input_hover" style="width: 328rpx;" @tap="tap_num('0','0')">
						<text class="number_input_item_text">0</text>
					</view>
					<view class="number_input_item" :hover-stay-time="50" :hover-start-time="50"
						hover-class="input_hover" @tap="close">
						<text class="number_input_item_text" style="font-size: 26rpx;">取消</text>
					</view>
				</view>
				<view class="number_right" :style="[selStytle]">
					<view class="number_input_item" @tap="back_key" :hover-stay-time="50" :hover-start-time="50"
						hover-class="input_hover">
						<n-icon name="backdelete" size="30" :color="selStytle.knavTitleColor"></n-icon>
					</view>
					<view class="number_input_item" @tap="change_show_pass()" :hover-stay-time="50"
						:hover-start-time="50" hover-class="input_hover">
						<n-icon name="attentionforbidfill" size="30" v-if="show_pass" :color="selStytle.knavTitleColor"></n-icon>
						<n-icon name="attentionfill" size="30" v-else  :color="selStytle.knavTitleColor"></n-icon>

					</view>
					<view class="number_input_item2 confirm_" :hover-stay-time="50" :hover-start-time="50"
						hover-class="input_hover2" @tap="on_confirm">
						<text class="number_input_item_text">确定</text>
					</view>
				</view>
			</view>
		</uni-popup>
	

	</view>
</template>

<script>
	export default {
		name: "pay_pass",
		data() {
			return {
				selStytle:{'--paybackground':this.$store.state.paybackground,
				'--knavTitleColor':this.$store.state.knavTitleColor,
				},
				password_show: true,
				pwLength: [{
					id: 1,
					value: '',
					focus: false
				}, {
					id: 2,
					value: '',
					focus: false
				}, {
					id: 3,
					value: '',
					focus: false
				}, {
					id: 4,
					value: '',
					focus: false
				}, {
					id: 5,
					value: '',
					focus: false
				}, {
					id: 6,
					value: '',
					focus: false
				}, ],
				show_pass: false,
				Keyboard_List: [{
						id: 1,
						value: '',
					}, {
						id: 2,
						value: '',
					}, {
						id: 3,
						value: '',
					}, {
						id: 4,
						value: '',
					}, {
						id: 5,
						value: '',
					}, {
						id: 6,
						value: '',
					}, {
						id: 7,
						value: '',
					}, {
						id: 8,
						value: '',
					}, {
						id: 9,
						value: '',
					}

				],
				current: 0
			};
		},
		mounted() {
			// this.clear()

		},
		methods: {
			inputNum(val,index){
			 const inputValue =  this.iNum;  
			 console.log("inputValue000",inputValue);
			this.password[index] = val;  
			if (inputValue.length > 1) {
			  // 如果输入超过一个字符，则只取第一个字符  
			  this.password[index] = inputValue.slice(0, 1);  
			} 
			 console.log("val----",val);
			},
			  handleInput(index, event) {  
				  // console.log("index",index);
				//  console.log("event",event);
			      const inputValue = event.target.value;  
				  this.iNum=inputValue
			      if (inputValue.length > 1) {  
			        // 如果输入超过一个字符，则只取第一个字符  
			        this.password[index] = inputValue.slice(0, 1);  
			      } else if (inputValue.length === 1) {  
			        // 如果输入一个字符，则更新密码数组并移动到下一个输入框  
			        this.password[index] = inputValue;  
			        if (index < this.password.length - 1) {  
			          // 延迟聚焦下一个输入框，确保 DOM 更新  
			          this.focusedIndex = index + 1;  
			          this.$nextTick(() => {  
			            // 查找并聚焦下一个输入框  
			            const nextInput = this.$el.querySelectorAll('input')[index + 1];  
			            if (nextInput) {  
			              nextInput.focus();  
			            }  
			          });  
			        }  
			      } else {  
			        // 如果输入框为空，则清空对应密码数组项  
			        this.password[index] = '';  
			      }  
			    }  ,
			fotget: function() {
			 
				uni.navigateTo({
					url: '/pages/user/settings/pay_pass/pay_pass'
				})
			},
			back_key: function() {
				console.log(this.current)
				if (this.current > 0) {
					this.current--
				}
				this.pwLength[this.current].value = ''
			},

			change_show_pass: function() {
				this.show_pass = !this.show_pass
			},

			tap_num: function(id, value) {

				if (this.current < this.pwLength.length) {
					this.pwLength[this.current].value = value;
				}
				if (this.current < 6) {
					this.current += 1
				}

			},



			clear: function() {
				this.pwLength = [{
					id: 1,
					value: '',
					focus: false
				}, {
					id: 2,
					value: '',
					focus: false
				}, {
					id: 3,
					value: '',
					focus: false
				}, {
					id: 4,
					value: '',
					focus: false
				}, {
					id: 5,
					value: '',
					focus: false
				}, {
					id: 6,
					value: '',
					focus: false
				}, ]
			},
			change_hanlder: function(e) {
				this.$emit('change', e)
				if (!e.show) {
					this.clear()
				}
			},

			on_confirm: function() {
				let pass_input = ''
				for (var i = 0; i < this.pwLength.length; i++) {
					pass_input += this.pwLength[i].value;
				}
				if (pass_input.length < 6) {
					uni.showToast({
						'icon': "error",
						'title': '密码长度不足'
					})
					return
				}
				this.$emit('confirm', pass_input);
				this.close()
			},

			open: function() {
				this.$refs.paypass.open();
			//	this.$refs.box_input.open();
				this.current = 0
			},
			close: function() {
				this.$refs.paypass.close();
			//	this.$refs.box_input.close();
			},

		}
	}
</script>

<style>
	.number_input_item_text {
		font-size: 34rpx;
	color: var(--knavTitleColor);
	}

	.number_input_item {
		width: 156rpx;
		height: 74rpx;
		justify-content: center;
		align-items: center;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		display: flex;
		font-weight: bold;
		background:var(--paybackground);
/* background-color: rgba(233, 194, 141, .6); */
	}

	.input_hover {
		/* background-color: rgba(233, 194, 141, .6); */
		background: #c1c3c3;
	}

	.number_input_item2 {
		height: 160rpx;
		width: 156rpx;
		/* border: 3rpx solid #d6d6d6; */
		justify-content: center;
		align-items: center;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		display: flex;
		
	}

	.confirm_ {
		background:var(--paybackground);
	color: var(--knavTitleColor);
		/* color: #0e0e0e; */
		font-weight: bold;
	}

	.input_hover2 {
		background: #c1c3c3;
	}

	.number_input {
		width: 500rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;

	}

	.input_keyborad {
		position: fixed;
		    bottom: 0;
		    left: 0;
		width: 750rpx;
		height: 450rpx;
		padding: 36rpx;
		padding-top: 50rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;

		background: #fff;
		/* border-top: 1rpx solid #d9d9d9; */

	}

	.number_right {
		flex-direction: column;
		align-items: center;
	}

	.confirm_border_text {
		font-size: 32rpx;
		font-weight: bold;
		color: var(--knavTitleColor);

	}

	.confirm_border {
		/* border: 2rpx solid #000000; */
		align-items: center;
		justify-content: center;
		flex-direction: row;
		border-radius: 6rpx;
		width: 478rpx;
		height: 76rpx;
	}

	.confirm {
		width: 490rpx;
		height: 86rpx;
		background: #f9e24b;

		border-radius: 10rpx;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 42rpx;
	}

	.input_group_item {
		width: 44rpx;
		height: 54rpx;

		border: 2rpx solid #999;
		border-radius: 6rpx;

		font-weight: bold;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		display: flex;
	}

	.input_group_item_text {
		/* color: #666; */
		font-size: 36rpx;
		font-weight: bold;
		color: var(--knavTitleColor);
	}

	.input_box {
		width: 490rpx;
		margin: 20rpx auto;
		text-align: center;
		display: flex;
		text-align: center;
		height: auto !important;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		padding: 40rpx 34rpx;
		background: none;
		border: none;
	}

.password-input-container {  
  display: flex;  
  justify-content: space-between;  
}  
  
.password-input {  
  width: 30px; /* 根据需要调整宽度 */  
  height: 30px; /* 根据需要调整高度 */  
  text-align: center;  
  border: 1px solid #ccc;  
  margin-right: 5px; /* 根据需要调整间距 */  
  /* 其他样式... */  
}  
	.close {
		position: absolute;
		top: 15rpx;
		right: 15rpx;
		z-index: 15;
	}

	.pay_pass_title {
		padding-top: 38rpx;
		width: 490rpx;
		justify-content: center;
		display: flex;
		align-items: center;
	}

	.pay_pass_title_text {
		line-height: 50rpx;
		font-size: 36rpx;
		font-weight: bold;
		/* color: #999; */		color: var(--knavTitleColor);
	}

	.pay_pass_box {
		width: 490rpx;
		border-radius: 30rpx;
		position: relative;
		background-color: #fff;

		border: 2rpx solid #d9d9d9;
		height: auto !important;
		box-sizing: border-box;
	}

	.input_box {
		margin-bottom: 0;
	}

	.forget {
		text-align: right;
		margin: 30rpx;
		z-index: 999999999999999;
	}
</style>